<template>
  <h2>用户信息</h2>
  <p>姓名：{{ userInfo.name }}</p>
  <p>性别：{{ userInfo.sex }}</p>
  <p>薪资：{{ userInfo.job.web.salary }}K</p>
  <p>
    <button @click="updateName">修改姓名</button>
    <button @click="updateSalary">修改薪资</button>
  </p>
</template>

<script>

import {reactive, readonly, shallowReadonly} from "vue";

export default {
  name: "Demo",
  setup() {

    let userInfo = reactive({
      name: '米色',
      sex: '男',
      job: {
        web: {
          salary: 10
        }
      }
    })

    // readonly 对象只读，数据被允许修改
    // userInfo = readonly(userInfo)

    // shallowReadonly 对象第一层允许修改
    userInfo = shallowReadonly(userInfo)

    const updateName = () => {
      userInfo.name += '-'
    }

    const updateSalary = () => {
      userInfo.job.web.salary += 1
    }

    return {
      userInfo,
      updateName,
      updateSalary,
    }
  }
}
</script>

<style scoped>

</style>